<template>
    <view class="orderEvaluate pb-150" v-if="detail">
        <Navigation backType="back" title="评价" background="#fff" />
        <view v-for="(item, indexs) in detail.items" :key="indexs">
            <view class="f ph-32 pv-32 bg">
                <image :src="item.picUrl" class="w-160 h-160 b-12 mr-20"></image>
                <view class="f f1 fd-c">
                    <view class="fs-28 fw-600 text-color4"> {{ item.spuName }}</view>
                    <view class="f ai-c jc-s-b w-f mt-8">
                        <!-- <view class="fs-24 mt-8 text-color3">预约时间：2020/09/21 12:40:00</view> -->
                        <view class="fs-24 text-color3">x{{ item.count }}</view>
                    </view>
                    <view class="f ai-c w-f mt-36">
                        <view class="fs-26 fw-600 text-color7">¥{{ item.payPrice }}</view>
                        <!-- <view class="ml-12 h-28 b-4 f ai-c fs-20 discount">5折无门槛券</view> -->
                    </view>
                </view>
            </view>
            <view class="mt-20 bg ph-32 pv-40">
                <view class="f ai-c">
                    <view class="fs-28 fw-500 text-color4 mr-32">评分</view>
                    <image
                        :src="index < item.descriptionScores ? starSelect : star"
                        class="w-56 h-56 mr-16"
                        v-for="(item2, index) in 5"
                        :key="index"
                        @click="changeStar(index, indexs)"
                    ></image>

                    <!-- <view class="fs-28 fw-500 text-color4 ml-12">非常满意</view> -->
                </view>
                <view class="content b-8 ph-32 pv-28 mt-40">
                    <u--textarea v-model="item.content" placeholder="请输入" border="none" count maxlength="300"></u--textarea>
                    <view class="mt-28" style="display: flex;align-items: center;flex-wrap: wrap;">
											<image :src="item2" class="w-146 h-146 f ai-c jc-c b-8 fd-c m-10" style="border: 1px solid #e2e2e2;" v-for="item2 in item.picUrls"></image>
                        <view class="w-146 h-146 f ai-c jc-c b-8 upload fd-c m-10" @click="changeAva(item.picUrls)">
                            <image src="http://cwht.ricecs.cn/app/mine/camera.png" class="w-48 h-42"></image>
                            <view class="fs-24 text-color3 mt-11">添加图片</view>
                        </view>
                    </view>
                </view>
            </view>
            <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
                <view class="f ai-c ph-40 h-136 jc-s-b">
                    <view class="f ai-c" @click="chooseNM">
                        <image src="../static/select-check.png" class="w-32 h-32 mr-8" v-if="anonymous"></image>
												<image src="../static/select.png" class="w-32 h-32 mr-8" v-else></image>
                        <view class="fs-28 text-color4">匿名评价</view>
                    </view>
                    <view class="w-478">
                        <u-button text="立即提交" color="#FABB3C" shape="circle" @click="toNext"></u-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
import { orderGetDetail } from '@/services/api/shop/order';
import { createComment } from '@/services/api/index';
import { getBaseUrl, getUploadUrl } from '@/utils/env';
const fileList = ref<any[]>([]);
const id = ref<string>();
const detail = ref<any>();
const anonymous=ref<boolean>(true)
const createReqVOList = ref<any>([]);
onLoad((options: any) => {
    id.value = options.id;
    getDetail();
});
function changeStar(index: number, indexs: number) {
    detail.value.items[indexs].descriptionScores = index+1;
		console.log(detail.value)
}
function chooseNM(){
		anonymous.value=anonymous.value?false:true
		
}
//获取详情
async function getDetail() {
    const { data } = await orderGetDetail({ id: id.value });
    data.items.forEach((item: any) => {
        item.descriptionScores = 0;
        item.content = '';
        item.picUrls = [];
    });
    detail.value = data;
}
async function toNext(){
	let list=[]
	for(var i in detail.value.items){
		list.push({
			anonymous:anonymous.value,
			orderItemId:detail.value.items[i].id,
			descriptionScores:detail.value.items[i].descriptionScores,
			benefitScores:detail.value.items[i].descriptionScores,
			content:detail.value.items[i].content,
			picUrls:detail.value.items[i].picUrls
		})
	}
	let data={
		createReqVOList:list
	}
	await createComment(data)
	uni.showToast({
		title:'评价成功'
	})
	setTimeout(()=>{
		uni.navigateBack()
	},500)
}
function changeAva(item:any) {
    uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
            console.log(JSON.stringify(res.tempFilePaths));
            uni.uploadFile({
                url: getUploadUrl(),
                filePath: res.tempFilePaths[0],
                name: 'file',
                formData: {
                    user: 'test',
                },
                success: (res) => {
                     item.push(JSON.parse(res.data).data)
                },
            });
        },
    });
}
// 新增图片
async function afterRead(event: any) {
    // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file);
    let fileListLen = fileList.value.length;
    lists.map((item) => {
        fileList.value.push({
            ...item,
            status: 'uploading',
            message: '上传中',
        });
    });
    for (let i = 0; i < lists.length; i++) {
        const result = await uploadFilePromise(lists[i].url);
        let item = fileList.value[fileListLen];
        fileList.value.splice(
            fileListLen,
            1,
            Object.assign(item, {
                status: 'success',
                message: '',
                url: result.data,
            })
        );
        fileListLen++;
    }
		console.log(fileList.value)
}
function uploadFilePromise(url: string) {
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            url: getUploadUrl(), // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
                user: 'test',
            },
            success: (res) => {
                setTimeout(() => {
                    resolve(res.data);
                }, 1000);
            },
        });
    });
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.orderEvaluate {
    background: #f5f5f5;
    min-height: 100vh;
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #f5f5f5;
        ::v-deep .u-button__text {
            font-size: 32rpx !important;
            font-weight: 600 !important;
            color: #ffffff;
        }
        ::v-deep .u-button {
            height: 96rpx !important;
        }
    }
    .upload {
        border: 1rpx dashed #dddddd;
    }
    ::v-deep .u-upload__wrap__preview {
        margin: 0 10rpx 10rpx 0 !important;
    }
    ::v-deep .u-upload__wrap__preview:nth-child(4n) {
        margin: 0 0 10rpx 0 !important;
    }
    ::v-deep .u-textarea__count {
        background: #f8f8f8 !important;
        color: #cccccc !important;
        font-size: 24rpx !important;
        bottom: -16rpx;
    }

    ::v-deep .u-textarea {
        padding: 0;
    }
    ::v-deep .u-textarea__field {
        background: #f8f8f8;
        height: 220rpx !important;
        font-size: 30rpx !important;
    }
    .content {
        background: #f8f8f8;
    }
    .bg {
        background: #fff;
    }
    .discount {
        color: #f54040;
        background: #fff5f5;
    }
}
</style>
